<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>淘彩</title>
    <link href="css/mui.css" rel="stylesheet"/>
    <link href="css/user.css" rel="stylesheet"/>
    <style>
        .money-dat-title{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 5px 15px;
            background: #fff;
        }
        .money-dat-title h4{
            font-size: 12px;
            font-weight: normal;
            color: #989898;
        }
        .money-dat-title h4 span{
            font-size: 26px;
            color: #282828;
        }
        .money-cont-list li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
        }
        .money-cont-list .lt{
            display: flex;
            align-items: center;
        }
        .money-cont-list .lt img{
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
        .money-cont-list .lt h3{
            margin: 0;
            font-size: 14px;
            font-weight: normal;
            color: #282828;
        }
        .money-cont-list .lt h4{
            margin: 5px 0 0 0;
            font-size: 12px;
            font-weight: normal;
            color: #989898;
        }
        .money-cont-list .rt{
            text-align: right;
        }
        .money-cont-list .rt span{
            font-size: 12px;
            color: #989898;
        }
        @media (max-width: 320px) {
            .money-dat-title h4{
                font-size: 10px;
            }
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <header class="mui-bar mui-bar-nav header">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h2 class="mui-title">提现详情</h2>
    </header>
    <div class="mui-content">
        <div class="money-dat-title">
            <h4>提现金额：<span>{{ amount }}</span> 元</h4>
            <h4>订单号：{{ rechargeNo }}</h4>
        </div>
        <div style="height: 10px;background: #efeff4;"></div>
        <div class="money-dat-cont">
            <ul class="money-cont-list">
                <li>
                    <div class="lt">
                        <img src="images/j1-2.png">
                        <div>
                            <h3>申请时间</h3>
                            <h4>{{ reflecTime }}</h4>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="lt">
                        <img v-if="statuss=='AUDIT' || statuss=='ALREADYMADE' || statuss=='SUCCESS' || statuss=='FAIL'" src="images/j2-2.png">
                        <img v-else src="images/j2-1.png">
                        <h3>银行处理中</h3>
                    </div>
                    <div class="rt"></div>
                </li>
                <li>
                    <div class="lt">
                        <img v-if="statuss=='SUCCESS'" src="images/j3-2.png">
                        <img v-else-if="statuss=='FAIL'" src="images/j3-3.png">
                        <img v-else src="images/j3-1.png">
                        <div>
                            <h3 v-if="statuss=='SUCCESS'">提现成功</h3>
                            <h3 v-else-if="statuss=='FAIL'">提现失败</h3>
                            <h3 v-else>等待处理结果</h3>
                            <h4 v-if="statuss=='FAIL'">原因：{{ cause }}</h4>
                        </div>
                    </div>
                    <div class="rt">
                        <span>{{ endTime }}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        new Vue({
            el: '#app',
            data:{
                amount:'',
                rechargeNo:'',
                reflecTime:'',
                endTime:'',
                statuss:'',
                cause:''
            },
            created:function(){
                var that = this
                var getUrl = window.location.href;
                var setUrl = getUrl.indexOf('=');
                var getcid = getUrl.substr(setUrl+1);

                common.ajax('biz/api/cash', {'id':getcid}, that.cash)
            },
            methods:{
                cash:function(data){
                    console.log(data)
                    var that = this
                    that.amount = data.data.amount
                    that.rechargeNo = data.data.rechargeNo
                    that.reflecTime = data.data.reflecTime
                    that.endTime = data.data.endTime
                    that.statuss = data.data.status
                    that.cause = data.data.cause
                }
            }
        })
    })
</script>
</html>
